<template>
     <el-table :data="matchStudyData.list" height="500" style="width: 95%;margin-top: 40px;margin-left: 20px;">
      <el-table-column prop="projectname" label="项目名称" width="250" />
      <el-table-column prop="degree" label="获奖级别" width="250" />
      <el-table-column prop="date" label="获奖时间" width="250"/>
      
        <el-table-column label="操作" width="250"
          ><el-button text @click="centerDialogVisible = true" style="border: 1px solid rgb(12, 153, 240);">
    详情
  </el-button></el-table-column
        >
    
    </el-table>

    

  <el-dialog
    v-model="centerDialogVisible"
    title="项目详情"
    width="30%"
    :data="matchStudyData.list"
    align-center
  >
    <span>项目名称： {{ matchStudyData.list[currentId].projectname }}</span><tr></tr>
    <span>获奖级别：{{ matchStudyData.list[currentId].degree }}</span><tr></tr>
    <span>获奖时间：{{ matchStudyData.list[currentId].date  }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        
      </span>
    </template>
  </el-dialog>
</template>

  
<script lang="ts" setup>
import { ref } from 'vue'
import API from "../pluging/axiosInstance.js";
import { useRoute } from 'vue-router'
import { reactive } from "vue";


const route = useRoute()
const name = route.query.name
const id = route.query.id
console.log("matchstudy id:"+id)
function getData () {
   API({
    url: "/home/match/study",
    method: "post",
    data: {
       id:id
    },
  }).then((res) => {
    console.log(res.data)
    matchStudyData.list=res.data.dataList
    console.log("请求成功!" + "请求数据：");
    console.log('项目名称：'+matchStudyData.list[currentId].projectname );

    // console.log(loginData.id)
  });
};

getData()

const matchStudyData = reactive({
  list:[{
    projectid:'',
    projectname:'',
    level: "",
    degree:'',
    descript: "",
    date:''
  }]
});


const centerDialogVisible = ref(false)

const  currentId=0;
</script>


<style scoped>
#nav{
  margin: 0px auto;
}

.dialog-footer button:first-child {
margin-right: 10px;
}

</style>
